<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { getSystemSettings, saveSystemSettings } from '@/api/company'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import { useI18n } from '@/hooks/web/useI18n'

defineOptions({
  name: 'SystemSettings'
})

const { t } = useI18n()
const formRef = ref()

const state = reactive({
  // 表单数据
  formData: {
    id: '',
    defaultLang: '',
    defaultTheme: '',
    pwLength: 6,
    pwStrength: 3,
    loginFailTimes: 0,
    lockMinutes: 0,
    googleAuth: 0,
    idleMinutes: 0,
    ipStrategy: 0,
    seq: 1
  },
  // 校验规则
  formRules: {},
  // 语言选项
  langOptions: [
    {
      value: 'zh_CN',
      label: t('common.zhCN')
    },
    {
      value: 'zh_HK',
      label: t('common.zhHk')
    },
    {
      value: 'en',
      label: t('common.en')
    }
  ],
  loading: false
})
onMounted(async () => {
  init()
})

// 保存表单
const save = () => {
  formRef.value.validate(async (vaild) => {
    if (!vaild) {
      return
    }
    let form = Object.assign({}, state.formData)

    state.loading = true
    await saveSystemSettings(form).then((res) => {
      const result = res as any
      //保存成功
      if (result.success) {
        ElMessage.success(t(result.message))
      } else {
        ElMessageBox.alert(t(result.message))
      }
      state.loading = false
    })
  })
}

//渲染页面
const init = async () => {
  const data = (await getSystemSettings()) as any
  state.formData = data.data
}
</script>

<template>
  <div>
    <!-- 卡片表頭 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ $t('settings.info') }}</span>
        </div>
      </template>
      <el-form
        ref="formRef"
        :model="state.formData"
        :rules="state.formRules"
        class="demo-form-inline"
        label-position="left"
        label-width="220px"
        style="padding: 10px 40px 0 10px"
      >
        <el-row :gutter="40">
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item :label="$t('user.defaultLang')" prop="defaultLang">
              <el-select
                v-model="state.formData.defaultLang"
                class="m-2"
                :placeholder="$t('common.selectText')"
                size="default"
                style="margin-left: 0px; width: 150px"
              >
                <el-option
                  v-for="item in state.langOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('settings.ipStrategy')" prop="ipStrategy">
              <el-radio-group v-model="state.formData.ipStrategy">
                <el-radio :label="0">{{ $t('settings.ipStrategy0') }}</el-radio>
                <el-radio :label="1">{{ $t('settings.ipStrategy1') }}</el-radio>
                <el-radio :label="2">{{ $t('settings.ipStrategy2') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('settings.pwLength')" prop="pwLength">
              <el-input-number v-model="state.formData.pwLength" :min="3" :max="64" />
            </el-form-item>
            <el-form-item :label="$t('settings.pwStrengthH')" prop="pwStrength">
              <el-input-number v-model="state.formData.pwStrength" :min="1" :max="3" /><span
                style="margin-left: 10px; font-size: 12px"
                >{{ t('settings.zmSzFh') }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item :label="$t('settings.loginFailTimes')" prop="loginFailTimes">
              <el-input-number v-model="state.formData.loginFailTimes" :min="1" :max="500"
            /></el-form-item>
            <el-form-item :label="$t('settings.lockMinutes')" prop="lockMinutes">
              <el-input-number v-model="state.formData.lockMinutes" :min="5" :step="30" :max="1440"
            /></el-form-item>
            <el-form-item :label="$t('settings.idleMinutes')" prop="idleMinutes">
              <el-input-number v-model="state.formData.idleMinutes" :min="10" :step="10" :max="600"
            /></el-form-item>
            <el-form-item :label="$t('settings.googleAuth')" prop="googleAuth">
              <el-radio-group v-model="state.formData.googleAuth">
                <el-radio :label="0">{{ $t('common.no') }}</el-radio>
                <el-radio :label="1">{{ $t('common.yes') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center; margin: 15px">
        <el-button type="primary" plain @click="save" :loading="state.loading">
          <el-icon><Check /></el-icon>&nbsp;{{ $t('common.save') }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
.box-card {
  .card-header {
    font-size: 16px;
    letter-spacing: 1px;
  }
  :deep(.el-input) {
    font-size: 12px;
  }
  :deep(.el-textarea__inner) {
    height: 85px;
    font-size: 12px;
  }
}
:deep(.el-input__inner) {
  &::placeholder {
    font-size: 12px;
  }
}
.el-select-dropdown__item {
  font-size: 12px;
}

:deep(.normal_label .el-form-item__error) {
  left: 0px;
}
:deep(.requireLabel .el-form-item__error) {
  margin-left: 10px;
}
</style>
